﻿@model ChurchDiary.TableEntity.EntityLabels
<script src="~/Scripts/ChurchControllers/ChurchMemberFamilyController.js"></script>
<div class="row" ng-controller="ChurchMemberFamilyController">
    <div class="search-bar collapsed">
        <div class="form-group">
            <div class="input-group input-group-lg">
                <input type="text" class="form-control" placeholder="Type to search..." ng-model="searchkey" ng-change="Search()">
                <span class="input-group-btn">
                    <button class="btn btn-square btn-lg btn-default no-shadow close-search-bar" type="button" ng-click="searchkey='';Search();"><i class="zmdi zmdi-close"></i></button>
                </span>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="bg-white bs-0 mb-20 widget">
            <div class="custom-grid-header">
                <div class="custom-grid-name">
                    Church Families
                </div>
                <div class="custom-grid-menu">
                    <ul class="custom-grid-menu-ul pull-right">
                        <li class="custom-grid-menu-ul-li" ng-click="ChangeView()">
                            <a href="javascript:;" class="text-white"><i class="zmdi zmdi-card-membership"></i></a>
                        </li>
                        <li class="custom-grid-menu-ul-li dropdown">
                            <a href="javascript:;" class="dropdown-toggle text-white"><i class="zmdi zmdi-print"></i></a>
                            <ul class="dropdown-menu dropdown-menu-right animated flipInY" style="margin-top: 4px; padding: 0px; width: 220PX;">
                                <li class="sortmenu">
                                    <div class="sort-col-1"><i class="zmdi zmdi-print"></i></div>
                                    <div class="sort-col-2"><a target="_blank" href="Members/PrintFamilyReports">Families</a></div>
                                    <div class="clearfix"></div>
                                </li>
                                <li class="sortmenu">
                                    <div class="sort-col-1"><i class="zmdi zmdi-print"></i></div>
                                    <div class="sort-col-2"><a target="_blank" href="Members/PrintFamilyWithMembersReports">Families and Family Members</a></div>
                                    <div class="clearfix"></div>
                                </li>
                            </ul>
                        </li>
                        <li class="custom-grid-menu-ul-li dropdown">
                            <a href="javascript:;" class="dropdown-toggle text-white"><i class="zmdi zmdi-sort"></i></a>
                            <ul class="dropdown-menu dropdown-menu-right animated flipInY" style="margin-top: 4px; padding: 0px; width: 220PX;">
                                <li class="sortmenu" ng-click="sortby='DEFAULT';sort()" ng-class="{sortactive:sortby=='DEFAULT'}">
                                    <div class="sort-col-1"><i class="zmdi zmdi-sort-by-alpha"></i></div>
                                    <div class="sort-col-2">Default</div>
                                    <div class="clearfix"></div>
                                </li>
                                <li class="sortmenu" ng-click="sortby='FAMILYNAME';sort()" ng-class="{sortactive:sortby=='FAMILYNAME'}">
                                    <div class="sort-col-1"><i class="zmdi zmdi-sort-by-alpha"></i></div>
                                    <div class="sort-col-2">Family Name</div>
                                    <div class="clearfix"></div>
                                </li>
                                <li class="sortmenu" ng-click="sortby='FAMILYNO';sort()" ng-class="{sortactive:sortby=='FAMILYNO'}">
                                    <div class="sort-col-1"><i class="zmdi zmdi-sort-by-alpha"></i></div>
                                    <div class="sort-col-2">Family No</div>
                                    <div class="clearfix"></div>
                                </li>
                                <li class="sortmenu" ng-click="sortby='PHONE';sort()" ng-class="{sortactive:sortby=='PHONE'}">
                                    <div class="sort-col-1"><i class="zmdi zmdi-sort-by-alpha"></i></div>
                                    <div class="sort-col-2">Phone</div>
                                    <div class="clearfix"></div>
                                </li>
                                <li class="sortmenu" ng-click="sortby='EMAIL';sort()" ng-class="{sortactive:sortby=='EMAIL'}">
                                    <div class="sort-col-1"><i class="zmdi zmdi-sort-by-alpha"></i></div>
                                    <div class="sort-col-2">Email</div>
                                    <div class="clearfix"></div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="widget-body">
                <div class="row">
                    <div class="col-md-12" ng-show="viewmode=='TABLE'">
                        <table class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th style="width: 10%">FAMILY NO</th>
                                    <th style="width: 30%">FAMILY NAME</th>
                                    <th style="width: 20%">PHONE</th>
                                    <th style="width: 25%">EMAIL</th>
                                    <th style="width: 15%">ACTION&nbsp;</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="data in list">
                                    <td>{{data.FamilyNo}}</td>
                                    <td>{{data.FamilyName}}</td>
                                    <td>{{data.ContactNo}}</td>
                                    <td>{{data.ContactEmail}}</td>
                                    <td>
                                        <div class="btn-group-sm" role="group" aria-label="Second group">
                                            <button type="button" class="btn btn-danger waves-effect" ng-click="delete(data.FamilyName,data.FamilyId)"><i class="fa fa-trash"></i></button>
                                            <a class="btn btn-success waves-effect" href="FamilyInfo?FamilyId={{data.FamilyId}}"><i class="fa fa-info-circle"></i></a>
                                            <a class="btn btn-purple waves-effect" target="_blank" href="PrintFamilyInfo?ChurchWorkerId={{data.FamilyId}}"><i class="zmdi zmdi-print"></i></a>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-12" ng-show="viewmode=='CARD'">
                        <ul class="card">
                            <li ng-repeat="data in list">
                                <div class="card-container">
                                    <div class="card-container-row">
                                        <div class="card-image">
                                            <img class="media-object mo-lg img-circle mCS_img_loaded" src="/Uploads/uploaded/_productlogo.png" alt="">
                                        </div>
                                        <div class="card-details">
                                            <div class="card-details-row-1"><i class="fa fa-user"></i> {{data.FamilyName}}</div>
                                            <div class="card-details-row-2"><i class="fa fa-phone"></i> {{data.ContactNo}}</div>
                                            <div class="card-details-row-3"><i class="zmdi zmdi-email"></i> {{data.ContactEmail}}</div>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="card-action">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div gridloader></div>
                    <div nodata></div>
                </div>
                <div ng-show="list.length > 0" style="padding-right: 10px; text-align: right;">
                    <div pagination="" page="currentPage" max-size="10" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
                </div>
            </div>
        </div>
    </div>
</div>


